<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" href="/lanproxy-config/layui/css/layui.css">
    <style type="text/css">
        .main-content {
            padding: 15px;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">LanProxy Configuration</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="javascript:;"
                                          class="logout"></a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll"></div>
    </div>

    <div class="layui-body"></div>

    <div class="layui-footer"></div>
</div>
<script src="/lanproxy-config/layui/layui.js"></script>
<script src="/jquery/jquery-3.1.1.min.js"></script>
<script src="/jquery/jquery.i18n.properties.min.js" type="text/javascript"></script>
<script src="/template/template.js"></script>
<script>
    window.clientList = [];

    function api_invoke(uri, params, callback) {
        var index = layer.load(1, {
            shade: [0.1, '#fff']
        });
        $.ajax({
            url: uri,
            data: JSON.stringify(params),
            type: 'POST',
            cache: false,
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                layer.close(index);
                callback(data);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.close(index);
                if ("undefined" == typeof (XMLHttpRequest.responseJSON)) {
                    layer.alert("System error, please try again later.");
                    return;
                }

                if (40100 == XMLHttpRequest.responseJSON.code) {
                    location.href = "/";
                } else {
                    layer.alert(XMLHttpRequest.responseJSON.message);
                    api_invoke("/config/detail", {}, function (data) {
                        clientList = data.data;
                    });
                }
            }
        });
    }

    function load_page(pageUrl) {
        $(".layui-body").load(pageUrl);
    }

    function check_lan(ip) {
        var re = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]):([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/
        return re.test(ip);
    }

    function check_port(port) {
        if (port > 65535) {
            return false;
        }
        var re = /^[1-9]+[0-9]*]*$/
        return re.test(port);
    }

    $(function () {
        if (window.history && window.history.pushState) {
            $(window).on('popstate', function () {
                window.history.pushState('forward', null, '#');
                window.history.forward(1);
            });
        }
        if ('pushState' in history) {
            window.history.pushState('forward', null, '#');
            window.history.forward(1);
        } else {
            History.pushState('forward', null, '?state=2');
            window.history.forward(1);
        }
        window.onhashchange = function () {
            History.pushState('forward', null, '?state=1');
        }

        $(".logout").click(function () {
            api_invoke("/logout", {}, function (data) {
                location.href = "/";
            })
        });

    });

    function update_menu() {
        api_invoke("/config/detail", {}, function (data) {
            if (data.code == 20000) {
                clientList = data.data;
                var html = template($("#menu-tpl").html(), {
                    list: clientList
                });
                $(".layui-side-scroll").html(html);
                layui.use('element', function () {
                    var element = layui.element;
                });
                $(".client-list").html($.i18n.prop('menu.client.list'));
                $(".client-list-sub").html($.i18n.prop('menu.client.list'));
                $(".client-add").html($.i18n.prop('menu.client.add'));
                $(".client-config").html($.i18n.prop('menu.client.config'));
                $(".statistics").html($.i18n.prop('menu.client.statistics'));
                $(".menu-item").click(function () {
                    window.clientIndex = $(this).attr("data-index");
                    load_page("html/lan/list.html");
                });
            } else {
                alert(data.message);
            }
        });
    }


    var i18nLanguage = "en";
    var webLanguage = ['zh-CN', 'en'];

    function initWebLanguage() {
        var navLanguage = navigator.language;
        if (navLanguage) {
            var charSize = $.inArray(navLanguage, webLanguage);
            if (charSize > -1) {
                i18nLanguage = navLanguage;
            }
        }
    }

    initWebLanguage();

    jQuery.i18n.properties({
        name: 'lang', //资源文件名称
        path: '/i18n/', //资源文件路径
        mode: 'map', //用Map的方式使用资源文件中的值
        language: i18nLanguage,
        encoding: 'UTF-8',
        callback: function () {//加载成功后设置显示内容
            $('title').html($.i18n.prop('title'));
            $(".layui-footer").html($.i18n.prop('title'));
            $(".logout").html($.i18n.prop('logout'));
            layui.use('layer', function () {
                window.layer = layui.layer;
                update_menu();
                load_page("html/client/list.html");
            });
        }
    });
</script>
<script id="menu-tpl" type="text/html">
    <ul class="layui-nav layui-nav-tree">
        <li class="layui-nav-item layui-nav-itemed"><a class="client-list"
                                                       href="javascript:;"></a>
            <dl class="layui-nav-child">
                <dd class="layui-this">
                    <a href="javascript:load_page('html/client/list.html');" class="client-list-sub"></a>
                </dd>
                <dd>
                    <a href="javascript:load_page('html/client/add.html');" class="client-add"></a>
                </dd>
            </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed">
            <a class="client-config" href="javascript:;"></a>
            <dl class="layui-nav-child">
                <%for(var i = 0; i < list.length; i++) {%>
                <dd>
                    <a href="javascript:;" class="menu-item" data-index="<%:=i%>"><%:=list[i].name%></a>
                </dd>
                <%}%>
            </dl>
        </li>
        <li class="layui-nav-item layui-nav-itemed"><a class="statistics"
                                                       href="javascript:load_page('html/statistics/list.html');"></a>
        </li>
    </ul>
</script>
</body>
</html>
